<template>
  <div class="app-container">
    <div :class="'van-after-border '+item.class">
      <van-field name="esign" :label="item.label">
        <template #input>
          <van-image v-if="resultImg!=''" width="4rem" height="1.5rem" fit="contain" :src="resultImg" @click="showEsign" />
          <div v-else class="esign-card" @click="showEsign">
            <p>点击签名</p>
          </div>
        </template>
      </van-field>
    </div>
    <van-popup ref="dlgesign" v-model="showPop" :overlay="false" style="width:100%;height: 100%;">
      <div class="esign-main">
        <div class="wrap2">
          <div class="actionsWrap">
            <div class="actions">
              <button class="button-clear" @click="handleBack">
                返回
              </button>

              <button class="button-clear" @click="handleReset">
                清除重写
              </button>
              <button class="button-agree" @click="handleGenerate">
                提交签字
              </button>
            </div>
          </div>
          <canvas id="signaturePad" class="canvas"></canvas>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import EleBase from './EleBase'
import SmoothSignature from 'smooth-signature'
import { Dialog } from 'vant'

export default {
  name: 'EleEsign',
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    }
  },
  data () {
    return {
      signWin: {
        width: 0,
        height: 0
      },
      width: 800, // 强制横屏，将
      height: 300,
      showPop: true,
      lineWidth: 8,
      lineColor: '#000000',
      bgColor: '#fafafa',
      fontSize: 0,
      resultImg: this.item.value || '',
      isCrop: false,
      sratio: 90,
      uploader: [],
      uploadUrl: 'api/Files/Upload',
      deleteUrl: 'api/Files/DelFile',
      signature: null
    }
  },
  mounted() {
    this.signWin.width = document.documentElement.clientWidth
    this.signWin.height = document.documentElement.clientHeight
    this.width = this.signWin.width - 100
    this.height = this.signWin.height

    this.initSmoothSignture()
    console.log('width=' + this.width)
    console.log('height=' + this.height)
    // 监听窗口大小改变，this.isScreenFull的值为是否全屏，若是则true，反之false
    window.onresize = () => {
      this.isScreenFull = document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement
    }
  },
  beforeMount () {
    window.addEventListener('resize', this.$_resizeHandler)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.$_resizeHandler)
  },
  methods: {
    $_resizeHandler() {
      var _this = this
      var xwidth = document.documentElement.clientWidth
      var xheight = document.documentElement.clientHeight
      if (xwidth > xheight) { // 横屏
        _this.showPop = false
        Dialog.alert({
          title: window.g.AppTitle,
          message: '请在手机设置中取消自动旋转功能, 确保能够正常电子签署。'
        }).then(() => {
          // on close
        })
      }
    },
    initSmoothSignture() {
      debugger
      this.showPop = false
      const canvas = window.document.getElementById('signaturePad')
      if (canvas !== null) {
        const options = {
          width: window.innerWidth - 65,
          height: window.innerHeight - 40,
          minWidth: 3,
          maxWidth: 10,
          // color: "#1890ff",
          bgColor: '#f8f8f8'
        }
        this.signature = new SmoothSignature(canvas, options)
      }
    },
    // 进入全屏
    fullScreenHandle() {
      try {
        var element = document.documentElement
        if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        } else if (element.mozRequestFullscreen) {
          element.mozRequestFullscreen()
        } else if (element.requestFullscreen) {
          element.requestFullscreen()
        }
      } catch (e) {
        alert(e)
      }
    },
    // 退出全屏
    exitFullscreenHandle() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },
    showEsign() {
      this.showPop = true
      debugger
      if (this.signature === null) {
        this.initSmoothSignture()
      }
    },
    onClickLeft() {
      this.showPop = false
      this.handleReset()
    },
    handleReset () {
      this.signature.clear()
    },
    handleGenerate () {
      // this.resultImg = rotateBase64Img(this.signature.getPNG(), 270)
      const canvas = this.signature.getRotateCanvas(-90)
      this.resultImg = canvas.toDataURL()
      debugger
      this.showPop = false
      this.item.value = this.resultImg
    },
    handleBack () {
      this.showPop = false
    }
  }
}
</script>

<style lang="less" scoped>
.esign-main {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  button {
    font-size: 18px;
  }
  canvas {
    border-radius: 3px;
    border: 2px dashed #ddd;
  }
  .wrap2 {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 15px;
    display: flex;
    justify-content: center;
    .actionsWrap {
      width: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .canvas {
      flex: 1;
    }
    .actions {
      margin-right: 10px;
      white-space: nowrap;
      transform: rotate(90deg);
      button{
        height: 30px;
        width: 80px;
        font-size: 12px;
        margin-right: 10px;
        outline: none;
        border-radius: 4px;
        border: 1px solid transparent;
      }
      .button-clear {
        background: #fff;
        color: #000;
        border: 1px solid #ddd;
      }
      .button-agree {
        color: #fff;
        background: rgb(0, 187, 255);
      }
    }
  }
}
.esign-card {
    padding: 10px 35px;
    color: #ddd;
    border: 1px dashed transparent;
    background: linear-gradient(#fff,#fff) padding-box,
      repeating-linear-gradient(-45deg,#ddd 0, #ddd 0.3em, #fff 0,#fff 0.6em);
      /* 0.3em设置虚线点的宽度或长度；0.6em设置虚线点的间距 */
}
.esigh-result {
  margin-top: 5px;
}
.esigh-result img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #ececee;
}
.esignature {
  margin: 0;
 /* border: 1px solid #ccc;
   width: 100% !important;
  height: 100% !important; */
}
</style>
